<template>
  <div>
    <h1>学会姓名:{{ StudentName }}</h1>
    <!-- 通过函数式的props达成子组件传值给父组件 -->
    <School :getSchoolName="getSchoolName" />
    <hr />
    <!-- 通过自定义事件达成子组件传值给父组件(第一种写法: @/v-on)-->
    <!-- <Student v-on:shijian="getStudentName" /> -->

    <!-- 通过自定义事件达成子组件传值给父组件 (第二种写法: ref)-->
    <Student ref="student" @click.native="show" />


    <!-- 组件标签绑定原生事件必须使用native修饰符  -->
    <Student ref="student" @click.native="show" />
  </div>
</template>
<script>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
export default {
  name: "App",
  components: {
    Student,
    School,
  },
  data() {
    return {
      StudentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了School的名", name);
    },
    // getStudentName(name) {
    //   this.StudentName = name
    //   console.log("App收到了Student的名", name);
    // },

    // show() {
    //   alert(123)
    // }
  },
  mounted() {
    // ref配合钩子 比直接在元素里绑定自定义事件传值 更加灵活
    // setInterval(() => {
    //   this.$refs.student.$on("shijian", this.getStudentName);
    // }, 2000);
    // 也可使用修饰符 一次性的
    // this.$refs.student.$once("shijian",this.getStudentName)

    // 自定事件的回调内的this指向事件触发者而不是组件实例对象 所以可以使用箭头函数的特性来解决指向组件实例对象的问题
    this.$refs.student.$on("shijian", (name) => {
      this.StudentName = name;
      console.log("App收到了Student的名", name);
    });
    // 或者还是把自定义事件的回调配置在methods中那么this也会修正指向为组件实例对象
    // this.$refs.student.$on("shijian",this.getStudentName)
  },
};
</script>
<style>
</style>